<style>
<!--
{literal}
#summaryDiv div.field-label {
    width: 130px !important;
}
#summaryDiv div.field-row {
    height: 32px !important;
}
{/literal}
-->
</style>

<script type="text/javascript">
<!--
{literal}
    $(document).ready(function() {
        $('#realAmount').autotab({
                maxlength: 11, 
                nospace: true,
                format: 'posnumericlocalize' 
        });
    });
{/literal}
//-->
</script>
<div class="form_container" id="summaryDiv">
    <form id="paymentSubmitFrm">
	    <div class="field-row">
	        <div class="field-label">{translate}Grand total{/translate}</div>
	        <div class="field-value" style="width: 140px; text-align: right;"><span class="field"  id="totalPatientPrice">{$grandTotal}</span></div>
	        <div class="field-label" style="padding-left: 200px;">{translate}Cashier{/translate}</div>
	        <div class="field-value" style="text-transform: uppercase;"><span class="field">{$cashierName}</span></div>
	        <div style="clear: both;"></div>
	    </div>
	    <div class="field-row">
	        <div class="field-label">
	            {translate}Insurance payment{/translate}
	        </div>
	        <div class="field-value" style="width: 140px; text-align: right;"><span class="field">{$insurancePrice}</span></div>
	        <div class="field-label" style="padding-left: 200px;">{translate}Collection type{/translate}</div>
	        <div class="field-value" style="width: 150px;">
	            <select id="paymentTypeLbx" name="paymentType" style="width: 116px;height: 22px;" disabled="disabled">
	                <option value="1" title="{translate}Collecting{/translate}">{translate}Collecting{/translate}</option>
	            </select>&nbsp;
	        </div>
	        <div style="clear: both;"></div>
	    </div>
	    <div class="field-row">
	        <div class="field-label">
	            {translate}Total patient price{/translate}
	        </div>
	        <div class="field-value" style="width: 140px; text-align: right;">
	            <span class="field" id="remainingAmount">{$patientPrice}</span>
	        </div>
            <div class="field-label" style="padding-left: 200px;">{translate}Receipt code{/translate}</div>
            <div class="field-value" style="width: 150px;">
                <input type="text" id="receiptCodeTxt" value="{$receiptCode}" 
                   onkeyup="return moveNext(event, 'realAmount')" style="width: 110px;" disabled="disabled">&nbsp;
                <input type="hidden" name="receiptCode" id="receiptCodeHdn" value="{$receiptCode}">
            </div>
	        <div style="clear: both;"></div>
	    </div>
	    <div class="field-row">
	        <div class="field-label">
	            {translate}Advance payment{/translate}
	        </div> 
	        <div class="field-value" style="width: 140px; text-align: right;">
	            <a href="javascript:viewAdvancePaymentDetails({$ticketId})" title="{translate}View payment details{/translate}">
	                <span class="field" style="text-decoration: underline; color: blue" id="totalAdvancePayment">{$realPayment}</span>
	            </a>
	        </div>
            <div class="field-label" style="padding-left: 200px;">{translate}Amount{/translate} (VND)</div>
            <div class="field-value" style="width: 150px;">
                <input type="text" name="amount" id="realAmount" value="{$remainingAmount}" style="font-weight: bold; width: 110px; text-align: right;"
                   onkeyup="return moveNext(event, 'noteTxt')">&nbsp;
                <input type="text" id="dummyInput" style="display: none; width: 0px;">
            </div>
	        <div style="clear: both;"></div>
	    </div>
	    <div class="field-row">
	        <div class="field-label">{translate}Patient's debt{/translate}</div>
	        <div class="field-value" style="width: 140px; text-align: right;"><span class="field" style="color: red; font-size: 20px; font-style: italic;">{$remainingAmount}</span></div>
	        <div class="field-label" style="padding-left: 200px;">{translate}Note{/translate}</div>
            <div class="field-value">
                <textarea name="note" id="noteTxt" style="width: 320px; height: 40px;" onkeyup="return moveNext(event, 'collectMoneyBtn')"></textarea>&nbsp;
            </div>        
	        <div style="clear: both;"></div>
	    </div>
	    <div style="height: 20px; line-height: 20px;"> 
            <div style="clear: both;"></div>
        </div>
	    <input type="hidden" id="ticketId" name="ticketId" value="{$ticketId}">
    </form>
</div>